<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">
    #red{
        background: red;
    }
    #white{
      background: white;
    }
  </style>
</head>

<body>

  <div class="container">
    <div v-bind:id="txt" :style="[sty1,sty2,sty3]">
      <h1 style="position:absolute">Hello World! <br> Hello Man!</h1>
    </div>
    <div class="">
       <input id="back" class="in" type="checkbox" value="background" /><label>背景</label>
       <input id="cor" type="checkbox"  value="color" /><label>color</label>
       <input  id="border" type="checkbox"  value="border"/><label>border</label>
       <br>
       高度
       <button  type="button" name="button" onclick="vm.changeHeight(-5)">-</button>
       <button type="button" name="button" onclick="vm.changeHeight(5)">+</button>
       宽度
       <button type="button" name="button" onclick="vm.changeWidth -= 5">-</button>
       <button type="button" name="button" onclick="vm.changeWidth += 5">+</button>
    </div>
  </div>

  <script type="text/javascript">

    var vm = new Vue({
      el:'.container',
      data:{
        txt:"white",
        sty1:{
          width:200,
          height:150,
        },
        sty2:{
          color:""
        },
        sty3:{
          border:""
        }
      },
      methods:{
        changeHeight(v){
          this.sty1.height = this.sty1.height + v;
        }
      },
      computed:{
        changeWidth:{
          get(){
           return  this.sty1.width;
         },
         set(v){
           this.sty1.width = v;
         }
       },
       toggleColor(){
         return this.firstnum + this.secondnum;
       }
      }
    });

    back.onclick = function () {
      if (back.checked) {
        vm.txt = "red";
      }else {
        vm.txt = "white";
      }
    }

    cor.onclick = function () {
      if (cor.checked) {
        vm.sty2.color = "SkyBlue";
      }else {
        vm.sty2.color = "";
      }
    }

    border.onclick = function () {
      if (border.checked) {
        vm.sty3.border = "2px solid black";
      }else {
        vm.sty3.border = "";
      }
    }

  </script>
</body>

</html>
